<template>
  <el-dialog :title="title" :visible.sync="visible" class="dialog-md" append-to-body @close="visible = false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-form-item label="上级名称">
        <el-input v-model="parentName" disabled />
      </el-form-item>
      <el-form-item label="地区名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入地区名称" maxlength="64" />
      </el-form-item>
      <el-form-item label="地区简称" prop="short_name">
        <el-input v-model="form.short_name" placeholder="请输入地区简称" maxlength="32" />
      </el-form-item>
      <el-form-item label="地区区号" prop="area_code">
        <el-input v-model="form.area_code" placeholder="请输入地区区号" maxlength="16" />
      </el-form-item>
      <el-form-item label="经纬度">
        <el-col :span="10">
          <el-input type="number" v-model="form.lng" placeholder="请输入longitude" min="0" max="180" />
        </el-col>
        <el-col :span="2" class="text-center"> - </el-col>
        <el-col :span="10">
          <el-input type="number" v-model="form.lat" placeholder="请输入latitude" min="0" max="90" />
        </el-col>
      </el-form-item>
      <el-form-item label="部门状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="dict in dict.type.sys_show_hide"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer slot">
      <el-button type="primary" @click="handleSubmit" :loading="submitting" :disabled="loading">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { infoCityApi, editCityApi, addCityApi } from '@/api/system/city'

export default {
  name: 'CityForm',
  dicts: ['sys_show_hide'],
  components: { TreeSelect },
  props: {
    value: Boolean,
    row: Object,
    moduleName: String
  },
  data() {
    return {
      title: '',
      loading: false,
      submitting: false,
      parentName: '',
      form: {
        parent_id: 0,
        name: undefined,
        area_code: undefined,
        short_name: undefined,
        lng: undefined,
        lat: undefined,
        status: '1'
      },
      rules: {
        name: [{ required: true, message: '地区名称不能为空', trigger: 'blur' }],
        short_name: [{ required: true, message: '简称名称不能为空', trigger: 'blur' }],
        area_code: [{ required: true, message: '区号不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      this.form.id = this.row?.id || undefined
      if (this.form.id) {
        this.title = '编辑' + this.moduleName
        await this.getRowData()
      } else {
        this.title = '添加' + this.moduleName
        this.form.parent_id = this.row?.parent_id || 0
        this.parentName = this.form.parent_id > 0 ? this.row?.parent_name || '' : '中国'
      }
      this.loading = false
    },
    async getRowData() {
      try {
        const { info } = await infoCityApi(this.form.id)
        this.form = this.dataToForm(this.form, info)
        this.parentName = info?.parent_name || ''
      } catch (error) {
        this.visible = false
      }
    },
    async handleSubmit() {
      try {
        const valid = await this.$refs.formRef.validate()
        if (!valid) return
      } catch (error) {
        return
      }
      if (this.submitting) return
      this.submitting = true
      try {
        await this.$modal.confirm('确定提交表单数据？')
        if (this.form.id) {
          await editCityApi(this.form)
        } else {
          await addCityApi(this.form)
        }
        this.$emit('submit')
        this.$modal.msgSuccess('操作成功')
        this.visible = false
      } catch (e) {
        this.submitting = false
      }
    }
  }
}
</script>
